<template>
    <ul class="list">
        <li class="list-item"
            v-for="(item,key) of cities" :key="key"
            @touchstart.prevent="clickHandler"
            @touchmove="onShortcutMove"
        >{{key}}
        </li>
    
    </ul>
</template>

<script>
  export default {
    name: 'alphabet',
    data () {
      return {
        touch: {},
        timer: null, // 函数截流 延时器
      }
    },
    computed: {
      letters () {
        return Object.keys(this.cities)
      },
      
    },
    
    props: {
      cities: Object,
    },
    methods: {
      clickHandler (e) {
        // 触摸开始事件：  首先获取触发事件的元素的文本或者属性 作为信号字母
        let i = e.target.innerHTML.trim()
        // 兄弟组件传值  将内部字母传递给兄弟组件 触发滚动位置跳转
        this.$emit('changeCityItem', i)
        
        // 获取到26个字母的数组
        let letters = this.letters
        // 找到数组中与当前触发touchstart事件的对象的信号相同的成员的index
        let index = letters.findIndex(item => item == i)
        
        // 记录一下点击时候的 Y坐标 和 index
        let firstTouch = e.touches[0].pageY
        this.touch.y1 = firstTouch  // 触摸点的坐标
        this.touch.anchorIndex = index  // 触摸点的字母的的索引
        
      },
      onShortcutMove (e) {
        // 延时器 截流 提高性能
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = window.setTimeout(() => {
          
          // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
          let touchMove = e.touches[0].pageY
          this.touch.y2 = touchMove
          
          // 这里的 20 是索引元素的高度
          let delta = Math.floor((this.touch.y2 - this.touch.y1) / 21)
          // 计算最后的位置
          let index = this.touch.anchorIndex + delta // 将触发touchstart的index 和 当前移动的 距离相加获取当前手指移动到哪了
          // 将滑动到的字母传递给父组件
          this.$emit('changeCityItem', this.letters[index])
        }, 16)
        
      },
    },
  }
</script>

<style lang="stylus" scoped>
    @import "../assets/varibles.styl"
    .list {
        position: fixed;
        right: 0;
        top: 1.5rem;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content center;
        width 0.5rem;
        .list-item {
            line-height 0.4rem;
            text-align center;
            color: $bgcolor;
        }
    }
</style>